無障礙測驗券

無障礙網站 (Web Accessibility)

fcc的這項作業簡單地讓學習網站的我們了解到，在設計或是製作一個給人們看的網站時，可以多費一點心思給身障人士(例如視覺障礙、聽覺障礙、行動障礙、認知障礙等等)，這對於公平的社會而言，是一個值得一提的事情，今天就簡單的介紹無障礙網頁。

為什麼我要做無障礙網頁？

在網際網路誕生之前，有一個組織致力於訂定標準，來統一每一個網頁版本的內容，才能夠像現在，我們寫出來的網頁可以相容每一台設備與網站，這個組織稱為：
全球資訊網協會(World Wide Web Consortium，縮寫W3C)
當然他們也針對了無障礙網頁的一致性做出規範，稱為：
無障礙網頁內容指引（Web Content Accessibility Guidelines，縮寫WCAG）
的確這麼龐大的規則會讓人感到緊張，但別忘了全球至少有22億的人口患有視力損傷或失明*，只要花一點心思就可能讓妳製作的網頁讓他們"看"到。

台灣對於無障礙網頁的規範？

台灣在今年成立的數位發展部：無障礙空間服務網之中也針對無障礙網站做了規範，並且提供相當多的學習資源，也期許台灣的網頁開發針對無障礙的內容能夠更加普及。

想要了解更多： 實踐無障礙網頁設計（Web Accessibility）系列 (2019) by Askie Lin

WAI-ARIA

HTML5出現語意化的標籤(<header>、<nav>)之前，網頁中滿滿的<div>，這或許在我們視覺上的確看不出區別，但對於失明者，可能藉由螢幕報讀器(screen reader)將網頁內容轉成文字並讀出，就會造成很大的"障礙"，因此W3C定義了一套HTML標籤上的屬性，來增加語意化，底下簡單的介紹：

• Role
  這個屬性用來直接定義元素所扮演角色，例如role="region"表示一個區塊、role="button"表示用作為按鈕。

• Properties
  賦予這個元素額外的屬性，例如下面<img>的alt屬性，這可以讓你不用看到圖片，也能知道這張圖片是在描述什麼。

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"
     alt="Five cats looking around a field." />

• States
  定義這個元素的狀態，例如aria-disabled="true"表示這個元素目前禁用。

這個主題對於我來說還是很難，所以僅僅做個簡單的介紹，以下提供了一些資源，回到fcc的任務上，就選擇放棄了來完成無障礙測驗券這一堂課吧。

下一篇：復刻

引用與資源：
freecodecamp
mdn_web_docs_Accessibility
mdn_web_docs_WAI-ARIA
實踐無障礙網頁設計（Web Accessibility）系列 (2019) by Askie Lin
我的無障礙測驗券
註1. World report on vision_2020